<template>
  <div>
    <div class="homeindex_top">
      <img :src="solution" alt="" />
      <div class="content_des">
        <div class="title">Home charging solutions</div>
        <div class="des">Recharge at home, more convenient</div>
        <div class="btn">Contact Us</div>
      </div>
    </div>
    <div class="section">
      <div class="title">A fast charging solution for MURBs</div>
      <div class="imgs_box">
        <div class="list">
          <div class="img">
            <img :src="changeLT" style="width:100%;height:100%" alt="">
          </div>
          <div class="text rightText">
            ChargePlex offers a hassle-free solution to meet the growing demand for EV charging. Our turnkey service includes installation, maintenance, and management of the charging stations, relieving property managers of the technical and operational burdens. By partnering with ChargePlex, property managers can enhance the value and attractiveness of their properties, increase tenant satisfaction, and generate additional revenue through our revenue sharing model.
          </div>
        </div>
        <div class="list">
          <div class="text leftText">
            ChargePlex's solution directly addresses the pain points experienced by MURB residents. By providing convenient, reliable, and fast EV charging options within their buildings, we eliminate the need for residents to rely on slow Level 1 charging or search for public charging stations. Our user-friendly mobile app and 24/7 customer support ensure a seamless charging experience, making EV ownership more accessible and attractive for MURB residents.
          </div>
          <div class="img">
            <img :src="changeRT" style="width:100%;height:100%" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import solution from "@/assets/images/site/solution.png";
import changeLT from "@/assets/images/site/changeLT.png";
import changeRT from "@/assets/images/site/changeRT.png";
export default {
  data() {
    return {
      solution:solution,
      changeRT:changeRT,
      changeLT:changeLT
    };
  },
  created() {
    
  },
  methods: {
    
  },
};
</script>
<style scoped>
.homeindex_top{
  position: relative;
}
.homeindex_top img {
  width: 100%;
  height: 720px;
  object-fit: cover;
  margin-bottom: 85px;
}
.homeindex_top .content_des{
  width:100%;
  position: absolute;
  top:300px;
  left:0;
  text-align: center;
}
.homeindex_top .content_des .title{
  color: #FFFFFF;
  font-size: 48px;
  margin-bottom: 8px;
}
.homeindex_top .content_des .btn{
  color: #FFFFFF;
  font-size: 18px;
  width: 140px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  background: #FF6C01;
  border-radius: 65px;
  margin: 0 auto;
}
.homeindex_top .content_des .btn:hover{
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}
.homeindex_top .content_des .des{
  font-size: 24px;
  color: #FFFFFF;
  margin-bottom: 67px;
}
.section{
  padding: 0px 200px;
}
.section .title{
  margin-bottom: 55px;
  color: #000000;
  font-size: 48px;
  font-weight: 600;
  width:100%;
  text-align: center;
}
.section .imgs_box{

}
.section .imgs_box .list{
  display: flex;
  margin-bottom: 74px;
}
.section .imgs_box .list .img{
  height:357px;
  width:50%;
}
.section .imgs_box .list .text{
  color: #3D3D3D;
  font-size: 18px;
  width:50%;
  line-height: 34px;
}
.rightText{
  padding-left: 38px;
}
.leftText{
  padding-right: 38px;
}
</style>